---
---

.em, .em-svg {
  height: 1.5em;
  width: 1.5em;

  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
  vertical-align: middle;
}

{% assign base = 'https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets' %}
{% for emo in site.data.emoji %}
  {% assign names = emo.name | split: ',' | concat: emo.alt_names | join: ', .em-' %}
  .em-{{ names }} {
    background-image: url('{{ base }}/72x72/{{ emo.file }}.png');

    &.em-svg {
      {% comment %} SVG support https://css-tricks.com/using-svg/#article-header-id-5 {% endcomment %}
      background: url('{{ base }}/72x72/{{ emo.file }}.png');
      background-image: url('{{ base }}/svg/{{ emo.file }}.svg'), none;
    }
  }
{% endfor %}
